<template>
  <div class="app-container">
    <el-form label-width="120px" ref="form" :model="form">
      <el-form-item label="车辆VIN码" prop="vin">
        <el-input name="vin" ref="vin" v-model="form.vin" @keyup.prevent.native.enter="checkLogin"></el-input>
      </el-form-item>
      <el-form-item label="替换件类型" prop="keyparts">
        <el-select
          style="width:100%;box-sizing:border-box;"
          v-model="form.reviewType"
          placeholder="请选择替换件类型"
          clearable
          >
          <el-option
            v-for="item in reviewTypeList"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="替换关键件条码" prop="oldReviewCode">
        <el-input name="oldReviewCode" ref="oldReviewCode" v-model="form.oldReviewCode" @keyup.prevent.native.enter="nextForNew"></el-input>
      </el-form-item>
      <el-form-item label="新关键件条码" prop="newReviewCode">
        <el-input name="newReviewCode" ref="newReviewCode" v-model="form.newReviewCode" @keyup.prevent.native.enter="replaceKeypart"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getReplaceType, replaceKeypart } from "@/api/mes-web/reviewparts-scan";
export default {
  name: "ReviewpartsScan",
  data() {
    return {
      // 用户名及绑定工位
      reviewpartsname: "",
      form: {
        vin: "",
        reviewType: '',
        oldReviewCode: '',
        newReviewCode: ''
      },
      reviewTypeList: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.vin.focus()
    })
  },
  created() {
    this.reviewpartsname = this.$store.getters.reviewpartsname;
    // 获取替换件类型
    getReplaceType().then(res => {
      if (res.code === 200) {
        this.reviewTypeList = []
        for(const i in res.data) {
          const item = { code: i, fullName: res.data[i]}
          this.reviewTypeList.push(item)
        }
      } else {
        this.$message.error(res.message)
      }
      
    })
  },
  methods: {
    checkLogin() {
      if (!this.reviewpartsname || this.reviewpartsname === '') {
        this.$message.warning('登陆态失效，请重新登陆')
        this.form.vin = ''
        return 
      }
      this.$refs.oldReviewCode.focus()
    },
    nextForNew() {
      this.$refs.newReviewCode.focus()
    },
    replaceKeypart() {
      if (!this.reviewpartsname || this.reviewpartsname === '') {
        this.$message.warning('登陆态失效，请重新登陆')
        return 
      }
      // 格式化提交数据
      const data = { 
        username: this.reviewpartsname,
        vin: this.form.vin,
        replaceType: this.form.reviewType,
        oldKeypartNo: this.form.oldReviewCode,
        newKeypartNo: this.form.newReviewCode
      }
      console.log(data)
      replaceKeypart(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.ininScan()
        } else {
          this.$message.error(res.message)
        }
      });
    },
    ininScan() {
      this.$message.success('车辆'+ this.form.vin + '追溯件替换完成！');
      setTimeout(() => {
        this.form.vin = ''
        this.form.reviewType = ''
        this.form.oldReviewCode = ''
        this.form.newReviewCode = ''
        this.$refs.vin.focus()
      }, 1000)
    }
  },
  destroyed() {}
};
</script>